<template>
  <div>
    <h1>1、动态组件的使用</h1>
    <div>
      <button @click="curComp='UserName'">账号密码填写</button>
      <button @click="curComp='UserInfo'">个人信息填写</button>
    </div>
    <div>
      <!-- <UserName v-if="bool"></UserName>
      <UserInfo v-else></UserInfo> -->
      <!-- 
        动态组件实现 组件切换显示
        切换的组件会频繁的创建和销毁,性能不高
        如何解决这个问题？
        答：可以通过keep-alive组件解决，这个keep-alive组件缓存被其包裹起来的组件

       -->
       <keep-alive>
          <component :is="curComp"></component>
       </keep-alive>
    </div>
  </div>
</template>

<script>
import UserName from "@/components/UserName.vue"
import UserInfo from "@/components/UserInfo"
export default {
  data(){
    return {
      curComp:"UserName" 
    }
  },
  components: {
    UserName, UserInfo
  }
}
</script>

<style>

</style>